<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息表录入</title>
    <!-- <link rel="stylesheet" href="../练习项目/css/bootstrap.min.css"> -->
    <style>
        /* 样式初始化 */
        * {
            padding: 0;
            margin: 0;
        }

        input {
            border: 1px solid #d3e5fe;
            outline: none;
            margin-right: 20px;
            text-indent: 10px;
        }

        select {
            margin-right: 20px;
        }

        .job {
            margin-top: 50px;
        }

        /* 版心start */
        .w {
            width: 1200px;
            text-align: center;
            margin: 0 auto;
        }

        /* 版心end */


        .bigbox {
            height: 2000px;
        }

        /* 标题start */
        h1 {
            display: inline-block;
            margin-top: 100px;
        }

        /* 标题end */


        /* <!-- 信息录入模块start --> */
        .message_input {
            margin-top: 50px;
        }

        .message_input input[name="student"] {
            width: 120px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input input[name="age"] {
            width: 100px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input select[name="sex"] {
            width: 80px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input input[name="salary"] {
            width: 120px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input select[name="address"] {
            width: 60px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input button {
            width: 60px;
            height: 26px;
            border-radius: 10px;
            background-color: #174086;
            color: #fff;
            cursor: pointer;
        }

        /* <!-- 信息录入模块end --> */


        /* 就业表格start */
        table {
            margin: 0px auto;
            width: 1000px;
        }

        th {
            background-color: #d3e5fe;
        }

        table,
        tr,
        th,
        td {
            border: 1px solid gainsboro;
            border-collapse: collapse;
            height: 50px;
        }

        /* .bi-patch-plus {
            vertical-align: middle;
        } */

        svg[class^="bi"] {
            vertical-align: middle;
        }


        /* 就业表格end */



        /* 统计模块start */

        .count {
            margin-top: 50px;
            position: relative;
            width: 1000px;
            height: 60px;
            background-color: grey;

        }

        .count span {
            position: absolute;
            right: 20px;
        }

        /* 统计模块end */
    </style>
</head>

<body>
    <!-- HTML模块 -->
    <div class="bigbox w">
        <!-- 新增学员 -->
        <h1>新增学员</h1>

        <!-- 信息录入模块 -->
        <div class="message_input">
            <form class="info">
                <input type="text" name="student" placeholder="姓名">
                <input type="text " name="age" placeholder="年龄">
                <select name="sex" id="">
                    <option selected="selected">男</option>
                    <option>女</option>
                </select>
                <input type="text" name="salary" placeholder="薪资">
                <select name="address" id="">
                    <option selected="selected" value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广东">广东</option>
                    <option value="浙江">浙江</option>
                    <option value="南昌">南昌</option>
                    <option value="江西">江西</option>
                    <option value="厦门">厦门</option>
                    <option value="赣州">赣州</option>
                    <option value="兴国">兴国</option>
                </select>
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-patch-plus" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z" />
                        <path
                            d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z" />
                    </svg>
                    添加
                </button>
        </div>
        </form>


        <!-- 就业榜表格模块 -->
        <h1 class="job">就业榜</h1>
        <!-- 统计模块 -->
        <div class="count w">
            <span>共有数据</span>
        </div>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>薪资</th>
                    <th>就业城市</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>


    <!-- js模块 -->
    <script>
        //   1, 第一部分||获取本地存储内容渲染页面
        const arr = JSON.parse(localStorage.getItem('data')) || []
        // 渲染函数
        function romance() {
            // 利用map将取出来的数组进行拼接
            const newarr = arr.map(function (ele, index) {
                return `
                     <tr>
                        <td>${ele.stuId}</td>
                        <td>${ele.student}</td>
                        <td>${ele.age}</td>
                        <td>${ele.sex}</td>
                        <td>${ele.salary}</td>
                        <td>${ele.address}</td>
                        <td>${ele.time}</td>
                         <td data-id="${index}"><a href="#">删除</a></td> 
                     </tr>
                    `
            })
            // 将拼接好的数组转换回来并打印出来
            const tbody = document.querySelector('tbody')
            tbody.innerHTML = newarr.join('')
            // 统计模块
            const count = document.querySelector('.count span')
            count.innerHTML = arr.length
        }
        romance()


        // 2,增加模块
        const student = document.querySelector('input[name=student]')
        const age = document.querySelector('input[name=age]')
        const sex = document.querySelector('select[name=sex]')
        const salary = document.querySelector('input[name=salary]')
        const address = document.querySelector('select[name=address]')
        const button = document.querySelector('button')
        const info = document.querySelector('.message_input .info')
        const tbody = document.querySelector('tbody')
        // 给表单添加提交时间记得提交事件添加刷新拦截
        info.addEventListener('submit', function (e) {
            // 阻止表单刷新
            e.preventDefault()

            const obj = {
                /* 处理 stuId：数组最后一条数据的stuId + 1   获取最后一条表格的位置
              并且当一开始没有数据时判断是否有数据没有则为1 */
                stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
                student: student.value,
                age: age.value,
                sex: sex.value,
                salary: salary.value,
                address: address.value,
                time: new Date().toLocaleString()

            }
            if (obj.student === '' || obj.age === '' || obj.salary === '') {
                alert('请输入完整信息')
            }
            else {
                arr.push(obj)
                localStorage.setItem('data', JSON.stringify(arr))
                romance()
                this.reset()
            }
        })


        // 3,删除模块
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                if (confirm('您确定要删除这条数据吗？')) {
                    arr.splice(e.target.dataset.id, 1)
                    romance()
                    localStorage.setItem('data', JSON.stringify(arr))
                }
            }

        })
    </script>
</body>

</html>